<template>
	<view class="feedback">
		<view class="list">
			<view class="inp clearfix" @click="hidden = true">
				<view class="name fl">{{typevalue}}</view>
				<image src="../../../static/images/right.png" class="right fr"></image>
			</view>
			<view class="inp clearfix">
				<view class="name fl">您的联系方式</view>
				<input type="text" placeholder="请输入" v-model="tell" class="input fr" />
			</view>
			<view class="textarea">
				<textarea placeholder-style="color:#787B8F" placeholder="请输入您反馈的内容" v-model="content"></textarea>
			</view>
		</view>
		<view class="footer" @click="submit">
			提交
		</view>
		<view class="beijing" v-if="hidden"></view>
		<view class="tankuang" v-if="hidden">
			<view class="top">
				<view class="quxiao" @click="quxiao">取消</view>
				<view class="center">请选择</view>
				<view class="queren" @click="queren">确定</view>
			</view>
			<view class="bottom">
				<view :class="[type === 1?'active':'']" @click="type = 1">软件问题</view>
				<view :class="[type === 2?'active':'']" @click="type = 2">产品建议</view>
				<view :class="[type === 3?'active':'']" @click="type = 3">账号问题</view>
				<view :class="[type === 4?'active':'']" @click="type = 4">其他问题</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';

	export default {
		data() {
			return {
				type: 1,
				typevalue: '选择反馈类型',
				tell: '',
				content: '',
				hidden: false,
			}
		},
		onLoad() {

		},
		methods: {
			submit() {
				let tell = this.tell;
				let content = this.content;
				let typevalue = this.typevalue;
				
				if(typevalue == '选择反馈类型' || tell == '' || content == ''){
					uni.showToast({
						title: '信息不能为空',
						icon: 'none'
					})
					
					return;
				}

				request({
					url: '/api/user/feedback',
					method: 'POST',
					data: {
						type: typevalue,
						tell: tell,
						content: content,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					uni.showToast({
						title: response.msg,
						icon: 'none'
					})

					setTimeout(function() {
						uni.navigateBack()
					}, 2000)
				}).catch((error) => {});
			},
			quxiao(){
				this.hidden = !this.hidden;
				this.type = 1;
				this.typevalue = '选择反馈类型';
			},
			queren(){
				this.hidden = !this.hidden;
				if(this.type == 1){
					this.typevalue = '软件问题';
				}else if(this.type == 2){
					this.typevalue = '产品建议';
				}else if(this.type == 3){
					this.typevalue = '账号问题';
				}else if(this.type == 4){
					this.typevalue = '其他问题';
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.feedback {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		overflow: hidden;

		.list {
			width: 100%;
			margin: 0 auto;
			margin-top: 40rpx;

			.inp {
				width: 94%;
				margin: 0 auto;
				height: 88rpx;
				line-height: 88rpx;
				box-sizing: border-box;
				background: #242831;
				border-radius: 10rpx;
				padding: 0 3%;
				margin-bottom: 20rpx;

				.name {
					font-size: 30rpx;
					color: #FFFFFF;
					width: 40%;
					height: 88rpx;
					line-height: 88rpx;
				}

				.right {
					margin-right: 10rpx;
					width: 16rpx;
					height: 28rpx;
					display: flex;
					margin-top: 30rpx;
				}

				.input {
					width: 50%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: right;
					color: #787B8F;
					margin-right: 10rpx;
				}
			}

			.textarea {
				width: 94%;
				margin: 0 auto;
				background: #242831;
				border-radius: 10rpx;

				textarea {
					width: 100%;
					height: 320rpx;
					padding: 3%;
					box-sizing: border-box;
					font-size: 30rpx;
					color: #787B8F;
				}
			}
		}

		.footer {
			width: 94%;
			margin: 0 auto;
			position: fixed;
			left: 3%;
			bottom: 40rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
			color: #806B1A;
			font-size: 36rpx;
		}

		.beijing {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background: #000;
			opacity: 0.5;
			z-index: 10;
		}

		.tankuang {
			width: 100%;
			height: 432rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 20;
			background: #242831;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			.top {
				width: 94%;
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				position: relative;

				.center {
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.quxiao {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 30rpx;
					color: #999999;
				}

				.queren {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 30rpx;
					color: #ECDEA4;
				}
			}

			.bottom {
				width: 94%;
				margin: 0 auto;
				margin-top: 20rpx;

				view {
					width: 100%;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					font-size: 30rpx;
					color: #CCCCCC;
				}

				.active {
					font-size: 30rpx;
					color: #806B1A;
					background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
					border-radius: 10rpx;
				}
			}
		}
	}
</style>